<template>
  <div class="gray-page record-page log-page">
    <nav-bar title="任务记录" theme="white"></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <div class="table-list">
        <van-sticky :offset-top="44">
          <div class="table-list-head">
            <van-row>
              <van-col :span="12" align="center">任务名称</van-col>
              <van-col :span="6" align="center">状态</van-col>
              <van-col :span="6" align="center">接收人</van-col>
            </van-row>
          </div>
        </van-sticky>
        <div class="page-scroll">
          <van-sticky :offset-top="88">
            <van-pull-refresh v-model="refreshing" style="min-height: 100%">
              <template v-if="listData.length">
                <van-list
                  v-model="loading"
                  :finished="finished"
                  :immediate-check="false"
                  :error.sync="error"
                  error-text="请求失败，点击重新加载"
                  finished-text="没有更多了~"
                  @load="getList"
                >
                  <div v-for="(item, key) in listData" :key="key">
                    <div
                      class="table-list-row"
                      :class="key % 2 ? 'table-list-row__even' : 'table-list-row__odd'"
                      @click="toDetail(item)"
                    >
                      <van-row type="flex">
                        <van-col :span="12">
                          <p class="van-ellipsis table-list-row__center">{{ item.taskName }}</p>
                        </van-col>
                        <van-col :span="6" align="center">
                          <p class="van-ellipsis table-list-row__center">{{ item.taskStatusName }}</p>
                        </van-col>
                        <van-col :span="6" align="center">
                          <p class="van-ellipsis table-list-row__center">{{ item.taskReceiverName }}</p>
                        </van-col>
                      </van-row>
                    </div>
                  </div>
                </van-list>
              </template>
              <template v-else>
                <van-empty
                  :image="require('@/assets/images/basic/pic_no_content.png')"
                  description="暂无内容~"
                  style="height: 300px"
                />
              </template>
            </van-pull-refresh>
          </van-sticky>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import List from '@/mixins/list'
import Routine from '@/api/routine'
export default {
  mixins: [List],
  data() {
    return {
      api: Routine.Task,
      searchForm: {
        pageNumber: 1,
        recordSize: 0,
        pageSize: 10,
        taskOrPlan: '1',
        addUser: JSON.parse(localStorage.getItem('userInfo')).gridPersonCode
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    toDetail(data) {
      this.$router.push({
        path: '/my/task/detail',
        query: {
          taskCode: data.taskCode,
          taskStatus: data.taskStatus
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
@import '~@/assets/style/list.less';
@import '~@/assets/style/table.less';
</style>
